<template>
  <div class="main">
    <NewCard title="订单详情" isright="isright" v-if="orderOrDetail">
      <template slot="right">
        <span class="hintRight" @click="cutDetail">
          {{ getOrderState() }} <i class="el-icon-arrow-right"></i>
        </span>
      </template>
      <div class="pay">
        <div class="pay_main">
          <el-row>
            <el-col :span="24">
              <p class="inputTitle">订单信息</p>
              <ul class="detailList">
                <li>
                  <span>订单编号</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.id }}</p>
                  </div>
                </li>
                <li>
                  <span>订单类型</span>
                  <div class="detailPage">
                    <p>项目</p>
                  </div>
                </li>
                <li>
                  <span>订单名称</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.title }}</p>
                  </div>
                </li>
                <li>
                  <span>委托地区</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.goods.city }}</p>
                  </div>
                </li>
                <li>
                  <span>创建时间</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.createdTime }}</p>
                  </div>
                </li>
                <li>
                  <span>订单金额</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.goods.amount | sumFilters }}</p>
                  </div>
                </li>
                <li v-if="orderinfo.status != '0'">
                  <span>已支付</span>
                  <div class="detailPage">
                    <p>{{ getPaid() | sumFilters }}</p>
                  </div>
                </li>
                <li v-if="orderinfo.status != '0'">
                  <span>未支付</span>
                  <div class="detailPage">
                    <p>{{ getNoPaid() | sumFilters }}</p>
                  </div>
                </li>
              </ul>
            </el-col>
            <el-col :span="24">
              <p class="inputTitle">接收信息</p>
              <ul class="detailList">
                <li>
                  <span>文件格式</span>
                  <div class="detailPage">
                    <p>PDF</p>
                  </div>
                </li>
                <li>
                  <span>接收邮箱</span>
                  <div class="detailPage">
                    <p>{{orderinfo.email}}</p>
                  </div>
                </li>
              </ul>
            </el-col>
            <el-col :span="24" class="payInfo">
              <p class="inputTitle">支付信息</p>
              <template v-for="(flow, index) in paidFlows">
                <h4>第{{ index + 1 }}次支付</h4>
                <ul
                  class="detailList"
                  style="border-bottom: none; margin-bottom: 0"
                >
                  <li>
                    <span>支付时间</span>
                    <div class="detailPage">
                      <p>{{ orderinfo.payTime }}</p>
                    </div>
                  </li>
                  <li>
                    <span>支付金额</span>
                    <div class="detailPage">
                      <p>
                        {{
                          ((flow.scale / 100) * orderinfo.goods.amount)
                            | sumFilters
                        }}
                      </p>
                    </div>
                  </li>
                </ul>
              </template>
            </el-col>
          </el-row>
          <el-row> </el-row>
        </div>
        <SubBtn>
          <template slot="btn">
            <div class="btn-box">
                <el-button round class="addBtn" @click="clickOverOrder" :disabled="orderinfo.status=='0'">{{orderinfo.status=='0'?'已结案':'结案'}}</el-button>
            </div>
          </template>
        </SubBtn>
      </div>
    </NewCard>

    <!-- 项目的具体信息 -->
    <div class="projectDetails" v-else>
      <Project :buyDetail="orderinfo"></Project>
    </div>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/components/subBtn/subBtn.vue"
import Project from "@/BMViews/views/userCenter/homepage/project.vue";
import { overProjectFinishApi } from "@/wss/newApi_3-24/work/documentary.js";
import debounce from "lodash/debounce";
export default {
  name: "ProjectDetails",
  props: {
    orderinfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: { NewCard, Project, SubBtn },
  data() {
    return {
      isright: true, //显示时间提示支付
      paidFlows: [], // 已支付的步骤

      orderOrDetail: true, // 当前显示订单详情还是项目详情
    };
  },
  mounted() {
    // 获取已支付的步骤
    this.paidFlows = this.orderinfo.goods.flows.filter((item) => {
      return item.isPaid == true;
    });

    // 返回
    this.$bus.$on('returnBtnShow',()=>{
      this.orderOrDetail = true; //改为显示订单详情
    })
  },
  watch: {
    orderinfo: {
      handler() {
        this.orderOrDetail = true; //改为显示订单详情
        // 获取已支付的步骤
        this.paidFlows = this.orderinfo.goods.flows.filter((item) => {
          return item.isPaid == true;
        });
      },
      deep: true, //深度监听
    },
  },
  methods: {
    //计算当前订单的状态 订单状态 -1已关闭 0已完成 1未支付 2已支付 3进行中
    getOrderState() {
      if (this.orderinfo.status == "0") {
        return "已完成";
      } else if (this.orderinfo.status == "2" || this.orderinfo.status == "3") {
        return "服务中";
      }
    },

    // 计算已支付的金额
    getPaid() {
      let flows = this.orderinfo.goods.flows;
      let paidArr = flows.filter((item) => {
        return item.isPaid == true;
      });
      let amount = 0;
      paidArr.forEach((item) => {
        amount = amount + (item.scale / 100) * this.orderinfo.goods.amount;
      });
      return amount;
    },

    // 计算已支付的金额
    getNoPaid() {
      let paidAmount = this.getPaid();
      return this.orderinfo.goods.amount - paidAmount;
    },

    // 点击右上角的服务中或者已完成
    cutDetail() {
      this.orderOrDetail = false;
    },

    // 点击结束订单
    clickOverOrder: debounce(function(){
      this.overProjectFinish(this.orderinfo.id)
    },1000),

    // 项目订单点击结束订单的接口 (结束项目订单的接口)
    async overProjectFinish(orderId){
      let result = await overProjectFinishApi(orderId)
      if(result.code==200) {
          this.$message({message: '操作成功',type: 'success'});
      }
    },
  },
};
</script>

<style scoped>
.main {
  height: 100%;
}

.main >>> .el-card__body {
  padding: 0 30px;
}
.main >>> .el-card__body > .top {
  margin: 0;
}

.main >>> .project_main{
  padding: 0 30px;
}

.projectDetails >>> .el-card__body>.top{
  display: none;
}

.hintRight {
  font-size: 14px;
  color: #999;
  font-weight: bold;
  cursor: pointer;
}
.hintRight > i {
  font-weight: bold;
}
::v-deep .el-card__body {
  position: relative;
}
ul,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}
/* 支付信息 */
.pay_main {
  margin-top: 15px;
  margin-bottom: 60px;
}
.pay_main h4 {
  color: #666;
  font-weight: bold;
  font-size: 14px;
  margin-top: 25px;
}
.pay_main .el-card {
  border-radius: 12px;
}
::v-deep .pay_main .el-card__body {
  padding: 20px;
}
.pay_main h3 {
  margin: 0;
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
.pay_main p {
  font-size: 14px;
  color: #999;
  margin: 0;
  line-height: 24px;
}
.pay_main .el-row {
  margin-top: 15px;
}
::v-deep .pay_main .el-row .el-input__inner {
  border-radius: 8px;
  height: 44px;
  line-height: 44px;
}
.pay_main .el-row .acceptEmail {
  border: 0;
  padding: 5px 0;
  margin: 7px 0;
  margin-right: 10px;
  font-size: 14px;
  color: #bababa;
  background: #fff;
  cursor: pointer;
}
.pay_main .el-row .acceptEmail:hover {
  color: #f87a23;
}
.pay_main .inputTitle {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}
.pay_main .inputTitle span {
  font-size: 14px;
  color: #999;
  font-weight: 400;
}
::v-deep .pay_main .el-tabs__header {
  border: 0;
  margin-bottom: 24px;
}
::v-deep .pay_main .el-tabs__nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 0;
}
::v-deep .pay_main .el-tabs__item {
  width: 49%;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  background-color: #fafafa;
}
::v-deep .pay_main .el-tabs__item.is-active {
  background-color: #f1f3ff;
  color: #39486f;
}
::v-deep .pay_main .el-tabs__item:hover {
  color: #39486f;
}

/* 内容详情列表 */
.detailList {
  border-bottom: 1px solid #ecedf0;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

.detailList li {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.detailList li > span {
  display: block;
  width: 17%;
  font-size: 14px;
  color: #999;
}
.detailList li .detailPage {
  width: 83%;
}
.detailList li .detailPage > p {
  width: 100%;
  font-size: 14px;
  color: #222;
}
.payInfo .detailList {
  padding-bottom: 0;
}

.showinfo {
  height: 100%;
}

/* 按钮 */
.payBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ecedf0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
}
.payBtn p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}
.payBtn p > span {
  color: #f87a23;
  font-size: 16px;
}
.payBtn .el-button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-size: 14px;
  padding: 10px 50px;
}
.payBtn .el-button:hover {
  opacity: 0.9;
}

/* 底部按钮 */
::v-deep .subBtn{
  padding: 10px 30px;
  align-items: center;
}
::v-deep .subBtn .el-button.is-disabled,
::v-deep .subBtn .el-button.is-disabled:hover{
  background-color: #f1f1f1;
  border-color: #f1f1f1;
  color: #999;
}
</style>
